<template>
    <div class='item-container'>
        <div class="st">
            <!-- 第一层 提示-->
            <div class="cate-nav">
                <div class="all-product">
                    <span class="all-product-content">全部商品分类</span>
                </div>
                <div class="all-tip">
                    <ul>
                        <!-- <li><span>秒杀商品</span></li> -->
                        <li><span @click="search('手机')">今日推荐</span></li>
                        <li><span @click="search('手机')">手机</span></li>
                        <li><span @click="search('电脑')">电脑</span></li>
                    </ul>
                </div>
            </div>

            <!-- 第二层  展示-->
            <div class="show-info-nav">
                <!-- 商品簡單分類 -->
                <div class="all-category">
                    <ul class="all-list">
                        <!-- {{ treeList }} -->
                        <li v-for="value in treeList">
                            <span class="category-one" @click="search(value.name)">{{ value.name }}</span>
                            <div class="hide-banner">
                                <div class="category-two-top">
                                    <div>
                                        <a href="" v-for="chValue1 in value.childrenCategory">
                                            {{ chValue1['name'] }}
                                        </a>
                                    </div>
                                </div>
                                <div class="categoty-item">
                                    <div class="categoty-item" v-for="chValue in value.childrenCategory">
                                        <div class="category-two">
                                            <!--保证当前节点不能为空 -->
                                            <a v-if="chValue.childrenCategory != null" href=""
                                                @click="search(chValue['name'])">
                                                {{ chValue['name'] }}
                                                <i class="el-icon-arrow-right"></i>
                                            </a>
                                        </div>
                                        <div class="category-third">
                                            <a href="" v-for="chChvalue in chValue.childrenCategory"
                                                @click="search(chChvalue['name'])">
                                                {{ chChvalue['name'] }}
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--商品轮播图  -->
                <div class="product-Carousel">
                    <div class="block">
                        <el-carousel trigger="click" height="465px">
                            <el-carousel-item v-if="carouselList.length > 0" v-for="carousel in carouselList" :key="carousel.id">
                                <img @click="goDetail(carousel.spuId)" :src="carousel.spuImage" alt="商品"
                                    style="height: 465px; width: 780px;">
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
                <!-- 用户信息展示 -->
                <div class="member-info">
                    <div class="member-head">
                        <el-avatar class="head-img" :size="80" src="#" @error="true">
                            <a href="/member/membersetting/memberdata">
                                <!-- 头像 -->
                                <img style="width: 80px; height: 80px" :src="memberVo.header" />
                            </a>
                        </el-avatar>
                    </div>
                    <div class="member-name">
                        <span>
                            Hi,欢迎来到muyangShop
                        </span>
                    </div>
                    <div class="login-button">
                        <button @click="checkDo()">
                            {{ this.loginValidate ? '退出' : "请登录" }}
                        </button>
                    </div>
                    <div class="newflash">
                        <span class="sun-new">太阳日报</span>
                        <ul>
                            <li v-if="hotSpuList.length > 0"  v-for="hotSpu in hotSpuList" :key="hotSpu.id">
                                <a >
                                    <span class="hot-review">热评</span>
                                    <span class="hot-info" @click="goDetail(hotSpu.spuId)" :title="hotSpu.spuTitle">
                                        {{ hotSpu.spuTitle }}
                                    </span>
                                </a>
                            </li>
                        </ul>
                        <span class="sun-new">一些都是为了更好的明天</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

import getUUID from '../utils/uuid';

// 导出模块
export default {
    // 模块名字
    name: 'navitem',
    // 模块数据
    data() {
        //数据
        return {
            treeList: [],
            loginValidate: false,
            memberVo: {
                header: ''
            },
            carouselList: [],
            hotSpuList: [],

        };
    },
    methods: {

        // 前往商品详情页
        goDetail(spuId){
            
            this.$router.push({
                path: '/product/productdetail',
                query: {
                    spuId: spuId,
                    param: getUUID()
                }
            })
        },


        // 搜索数据
        search(keyword) {
            this.$router.push({
                path: "/member/search",
                query: {
                    search: keyword
                }
            })
        },

        // 获得商品分类的树形数据
        getTreeList() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/category/treeList"),
                method: 'get'
            }).then(({ data }) => {
                let len = data.data.length;
                if (len > 20)
                    this.treeList = data.data.slice(0, 20)
                else this.treeList = data.data
            })
        },

        // 退出登录
        loginOut() {
            this.$http({
                url: this.$http.adornUrl(`/shitou-member/shitoumember/member/loginOut/${this.memberVo.id}`),
                method: 'post',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.loginValidate = true;
                    this.$router.go(0)
                } else {
                    this.loginValidate = false;
                }
            })
        },

        // 判断按钮是登录还是退出
        checkDo() {
            if (this.loginValidate) {
                this.loginOut()
            } else {
                this.$router.push({ path: '/member/login' })
            }
        },


        getCarousel() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/carousel/getShow"),
                method: 'get',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.carouselList = data.data==null?[]:data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },

        getHotSpu() {
            this.$http({
                url: this.$http.adornUrl("/shitou-product/shitouproduct/hotspu/getShow"),
                method: 'get',
            }).then(({ data }) => {
                if (data.code == 200) {
                    this.hotSpuList = data.data==null?[]:data.data
                } else {
                    this.$message({
                        type: 'warning',
                        message: data.message
                    })
                }
            })
        },


    },

    async created() {
        this.getTreeList()
        this.getCarousel()
        this.getHotSpu()
        // // 判断是否登录
        let member = await this.$memberInfo()
        if (member != null) {
            this.loginValidate = true;
            this.memberVo = member;
        } else {
            this.loginValidate = false;
        }

    }
};
</script>

<style scoped>
@import url("../utils/css/navitem.css");
</style>



vue
